<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--<%@ include file="ajax.jsp"%>--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <base href="<%=basePath%>"/>
    <title>首页</title>
<%--    搜索框使用了FontAwesome的图标--%>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            display: flex;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        .slideshow-container {
            flex: 1;
            overflow: hidden;
        }
        .slideshow {
            display: flex;
            width: 100%;
            height: 400px;
            transition: transform 0.5s ease-in-out;
        }
        .slideshow img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .cateList {
            flex: 1;
            margin-left: 40px;
        }
        .cateList .title {
            width: 150px;
            margin: 0 10px;
            font-weight: 600;
        }
        .goodsItem {
            width: 202px;
            float: left;
            position: relative;
            overflow: hidden;
            padding: 10px 18px;
            text-align: left;
            line-height: 20px;
        }
        .goodsItem .goodsImg {
            width: 200px;
            height: 200px;
            border: 1px solid #e2e2e2;
            margin-bottom: 4px;
        }
        .search-container {
            position: relative;
            width: 100%;
            margin: 50px 0;
        }
        .search-box {
            position: relative;
            width: 100%;
            height: 40px;
            border: 1px solid #d9d9d9;
            border-radius: 5px;
            overflow: hidden;
            display: flex;
        }
        .search-box input {
            width: 100%;
            height: 100%;
            padding: 0 16px;
            border: none;
            outline: none;
            font-size: 16px;
            line-height: 40px;
            color: #333;
            background: transparent;
            transition: all 0.3s ease;
        }
        .search-box input:focus {
            box-shadow: 0 0 5px rgba(0, 122, 204, 0.5);
            background-color: #fff;
            border-color: #007aff;
        }
        .search-box .search-icon {
            position: absolute;
            right: 16px;
            top: 12px;
            width: 16px;
            height: 16px;
            background: url(......) no-repeat;
            background-size: cover;
            transition: all 0.3s ease;
        }
        .search-box input:focus + .search-icon {
            background-position: 0 -16px;
        }
        .goodBox_1 {
            display: flex;
            flex-wrap: wrap;
        }
        .xm-box {
            width: 100%;
            padding: 20px 0;
            border-bottom: 1px solid #eee;
        }
        .xm-box:last-child {
            border-bottom: none;
        }
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .title span {
            font-size: 20px;
            font-weight: 600;
        }
        .title a {
            color: #007aff;
        }
        .goodsItem {
            width: 202px;
            margin-bottom: 20px;
        }
        .goodsItem:nth-child(3n+1) {
            margin-left: 0;
        }
        .goodsImg {
            width: 200px;
            height: 200px;
            border: 1px solid #e2e2e2;
            margin-bottom: 4px;
        }
        .goodsItem p {
            font-size: 14px;
            line-height: 20px;
            height: 40px;
        }
        .goodsItem p a {
            color: #333;
            text-decoration: none;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .price {
            color: #e60012;
            font-size: 16px;
            font-weight: 600;
        }
    </style>
</head>
<body class="index_page">
<jsp:include page="header.jsp"></jsp:include>
<script type="text/javascript">
    window.onload = function (){
        // 初始显示第一张图片
        showSlides();
    }
    var slideIndex = 0;

    function showSlides() {
        var slides = document.querySelector(".slideshow");
        var slideWidth = document.querySelector(".slideshow img").clientWidth;
        slideIndex++;
        slides.style.transform = "translateX(" + (-slideWidth * slideIndex) + "px)";
        if (slideIndex === slides.children.length - 1) {
            slideIndex = -1;
        }
        setTimeout(showSlides, 3500); // 切换间隔时间为3.5秒
    }
</script>
<div class="main_bg">
        <div style="width: 1200px; margin-top: 10px;">
            <div class="flex-row">
                <div class="slideshow-container">
                    <div class="slideshow">
                        <img src="/static/pic/001.jpg" alt="">
                        <img src="/static/pic/002.jpg" alt="">
                        <img src="/static/pic/003.jpg" alt="">
                        <img src="/static/pic/004.jpg" alt="">
                    </div>
                </div>
                <div class="flex-column" style="margin-left: 40px">
                    <div class="search-container">
                        <div class="search-box">
                            <input type="text" placeholder="Search...">
                            <i class="search-icon fa fa-search"></i>
                        </div>
                    </div>
                    <div class="cateList flex-column">
                        <c:forEach items="${cateList}" var="cate">
                            <div>
                                <div class="title">
                                    <a class="more" href="/index/cate?id=${cate.cateId }">${cate.cateName}</a>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
            <div class="blank5"></div>
            <div class="blank"></div>
        </div>

        <div class="blank"></div>
        <div class="goodBox_1">
            <!-- 循环开始 -->
            <c:forEach items="${frontList}" var="cate">
                <div class="xm-box">
<%--                    <h4 class="title">--%>
<%--                        <span>${cate.cateName}</span> <a class="more" href="/index/cate?id=${cate.cateId }">查看更多</a>--%>
<%--                    </h4>--%>
                    <div class="blank"></div>
                    <div id="show_new_area" class="clearfix">
                        <!-- 循环开始 -->
                        <c:forEach items="${cate.goodList}" var="good">
                            <div class="goodsItem">
                                <a href="/good/detail?id=${good.goodId}">
                                    <img src="${good.image }" alt="${good.goodName }"
                                         class="goodsImg" /> </a> <br/>
                                <p class="f1">
                                    <a href="/good/detail?id=${good.goodId}"
                                       title="${good.goodName }">${good.goodName }</a>
                                </p>
                                价格： <font class="f1"> ￥${good.price }元 </font>
                            </div>
                        </c:forEach>
                        <!-- 循环结束 -->
                    </div>
                </div>
                <div class="blank"></div>
            </c:forEach>
            <!-- 循环结束 -->
        </div>
</div>
<%--<jsp:include page="footer.jsp"></jsp:include>--%>
</body>
</html>
